<template>
  <div class="container">
    <div class="case_container">
      <div class="case_list">
        <div
          class="case_item"
          v-for="item in landTypeList"
          :key="item.id"
          @click="goOverview(item)"
        >
          <div class="img_box">
            <el-image
              :src="imgUrl + item.img"
              style="width: 100%; height: 100%"
            />
          </div>
          <div class="title_box">
            <div
              style="
                font-size: 18px;
                line-height: 35px;
                margin: 5px 0;
                word-break: keep-all;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ item.dictLabel }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { treeList } from '@/api/system/dict/data.js'
import { getDicts } from '@/api/system/dict/data.js'

export default {
  name: "CompreCase",
  components: {},

  data() {
    return {
      landTypeList: []
    };
  },
  created() {
    this.getLandTypeList()
  },
  computed: {
    imgUrl() {
      return process.env.VUE_APP_IP || ''
    },
  },
  methods: {
    async getLandTypeList() {
      // const res = await treeList({ dictType: 'plant_landscape_design' })
      // let tarList = res.data
      // tarList.forEach(item => {
      //   if (item.children && item.children.length > 0) {
      //     item.children.map(ele => {
      //       ele.dictLabel = ele.dictLabel.split('/').pop()
      //     })
      //   }
      // })
      // this.landTypeList = tarList
      const res = await getDicts('plant_landscape_design')
      const { data } = res
      this.landTypeList = data.filter(item => item.parentDictCode === 0)
    },
    goOverview(item) {
      const val = item.dictValue
      this.$router.push({ path: '/c_overview', query: { type: val } })
    }
  }
};
</script>

<style lang="scss" scoped>
.case_container {
  margin: auto;
  padding-top: 20px;
  padding-bottom: 60px;
  width: 80%;
  min-height: calc(100vh - 200px);
}

.case_list {
  padding: 5px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.case_item {
  cursor: pointer;
  margin: 5px 10px 35px 5px;
  width: 32%;
  height: 250px;
  display: flex;
  flex-direction: column;
  border: 1px solid #f1f2f3;
  border-radius: 5px;
  &:hover {
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.1);
  }
  .img_box {
    // flex: 1;
    height: 200px;
  }
  .title_box {
    padding-left: 10px;
    height: 50px;
    width: 90%;
    overflow: hidden;
  }
}
@media screen and (max-width: 909px) {
  .case_item {
    width: 45%;
    height: 200px;
  }
  .case_container {
    width: 90vw;
  }
}
</style>
